<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" href="../static/css/getdate.css" th:href="@{/css/getdate.css}"/>

</head>
<!--<style>-->
<!--    /* Custom CSS for gradient background */-->
<!--    .gradient-bg {-->
<!--        background: linear-gradient(to bottom, #f3f3f3, #d9d9d9);-->
<!--    }-->

<!--    /* 添加好看的边框和样式 */-->
<!--    .rank-list {-->
<!--        border: 2px solid #3498db; /* 边框样式 */-->
<!--        padding: 10px; /* 内边距 */-->
<!--        width: 300px; /* 设置宽度 */-->
<!--        margin: 0 auto; /* 居中显示 */-->
<!--        text-align: center; /* 文字居中对齐 */-->
<!--    }-->

<!--    .rank-list h2 {-->
<!--        margin: 0 0 10px; /* 顶部留白 */-->
<!--    }-->

<!--    .rank-list ul {-->
<!--        list-style: none; /* 移除列表样式 */-->
<!--        padding: 0; /* 去除默认内边距 */-->
<!--    }-->

<!--    .rank-list li {-->
<!--        padding: 5px 0; /* 列表项的上下内边距 */-->
<!--        border-top: 1px solid #dcdcdc; /* 列表项之间的分隔线 */-->
<!--    }-->

<!--</style>-->
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="rank-list">
                <h5 class="text-center mb-1">点赞排行榜</h5>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col" style="width: 50px">排名</th>
                        <th scope="col">标题</th>
                        <th scope="col">作者</th>
                        <th scope="col">点赞数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Iterate over articles and display data -->
                    <tr th:each="knowledgepool, knowledgepoolStart : ${likeCount}">

                        <th scope="row" th:text="${knowledgepoolStart.index + 1}"></th>
                        <td th:text="${knowledgepool.title}"></td>
                        <td th:text="${knowledgepool.author}"></td>
                        <td th:text="${knowledgepool.likeCount}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="rank-list">
                <h5 class="text-center mb-1">浏览排行榜</h5>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col" style="width: 50px">排名</th>
                        <th scope="col">标题</th>
                        <th scope="col">作者</th>
                        <th scope="col">浏览数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Iterate over articles and display data -->
                    <tr th:each="knowledgepool, knowledgepoolStart : ${pageViews}">

                        <th scope="row" th:text="${knowledgepoolStart.index + 1}"></th>
                        <td th:text="${knowledgepool.title}"></td>
                        <td th:text="${knowledgepool.author}"></td>
                        <td th:text="${knowledgepool.pageViews}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="rank-list">
                <h5 class="text-center mb-1">收藏排行榜</h5>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col" style="width: 50px">排名</th>
                        <th scope="col">标题</th>
                        <th scope="col">作者</th>
                        <th scope="col">收藏数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Iterate over articles and display data -->
                    <tr th:each="knowledgepool, knowledgepoolStart : ${collectionCount}">

                        <th scope="row" th:text="${knowledgepoolStart.index + 1}"></th>
                        <td th:text="${knowledgepool.title}"></td>
                        <td th:text="${knowledgepool.author}"></td>
                        <td th:text="${knowledgepool.collectionCount}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="rank-list">
                <h5 class="text-center mb-1">评论排行榜</h5>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col" style="width: 50px">排名</th>
                        <th scope="col">标题</th>
                        <th scope="col">作者</th>
                        <th scope="col">评论数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Iterate over articles and display data -->
                    <tr th:each="knowledgepool, knowledgepoolStart : ${commentCount}">

                        <th scope="row" th:text="${knowledgepoolStart.index + 1}"></th>
                        <td th:text="${knowledgepool.title}"></td>
                        <td th:text="${knowledgepool.author}"></td>
                        <td th:text="${knowledgepool.commentCount}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>


        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今天</span>
                    <h5>在线人数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" th:text="${online}"></h1>
                    <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                    </div>
                    <small>总人数</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">当月</span>
                    <h5>访问量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" th:text="${ViewsForM}"></h1>
                    <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                    </div>
                    <small>访问量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>新用户</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" th:text="${ViewsForDay}"></h1>
                    <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                    </div>
                    <small>新访客</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">最近一个月</span>
                    <h5>活跃用户</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" th:text="${activeUser}"></h1>
                    <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>
                    </div>
                    <small>12月</small>
                </div>
            </div>
        </div>
    </div>

    <div class="warp_box">
        <!-- 第一块 -->
        <div class="date_box">
            <div class="layui-row layui-col-space10">
                <!-- 左边     日历核心代码-->
                <div class="date_center">
                    <div class="clearfix date_top">
                        <div class="fl tody"></div>
                        <div class="date_action fl">
                            <i class="layui-icon layui-icon-triangle-r icon_left"></i>
                            <span class="today_span"></span>
                            <i class="layui-icon layui-icon-triangle-r icon_right"></i>
                        </div>
                        <div class="rigth_action fr">
                            <span class="current"> 今天 </span>
                        </div>
                    </div>
                    <div class="clearfix date_header">
                        <div class="week_item">日</div>
                        <div class="week_item">一</div>
                        <div class="week_item">二</div>
                        <div class="week_item">三</div>
                        <div class="week_item">四</div>
                        <div class="week_item">五</div>
                        <div class="week_item">六</div>
                    </div>
                    <div class="clearfix day_item" id="day_item">
                        <!-- <div class="day_list">
                                    <div class="day_center">
                                      <div class="dayone">1</div>
                                      <div class="daytwo">二十</div>
                                      <div class="dayshark">.</div>
                                    </div>
                                  </div> -->
                    </div>
                </div>

                <!-- 左边     日历核心代码-->
            </div>
        </div>
    </div>

    <!--<div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>订单</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-white active">天</button>
                            <button type="button" class="btn btn-xs btn-white">月</button>
                            <button type="button" class="btn btn-xs btn-white">年</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <ul class="stat-list">
                                <li>
                                    <h2 class="no-margins">2,346</h2>
                                    <small>订单总数</small>
                                    <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 48%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">4,422</h2>
                                    <small>最近一个月订单</small>
                                    <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 60%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">9,180</h2>
                                    <small>最近一个月销售额</small>
                                    <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 22%;" class="progress-bar"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    -->

    <!--    <div class="row">-->
    <!--        <div class="col-sm-12">-->
    <!--            <div class="ibox float-e-margins">-->
    <!--                <div class="ibox-title">-->
    <!--                    <h5>用户项目列表</h5>-->
    <!--                    <div class="ibox-tools">-->
    <!--                        <a class="collapse-link">-->
    <!--                            <i class="fa fa-chevron-up"></i>-->
    <!--                        </a>-->
    <!--                        <a class="close-link">-->
    <!--                            <i class="fa fa-times"></i>-->
    <!--                        </a>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--                <div class="ibox-content">-->
    <!--                    <table class="table table-hover no-margins">-->
    <!--                        <thead>-->
    <!--                        <tr>-->
    <!--                            <th>状态</th>-->
    <!--                            <th>日期</th>-->
    <!--                            <th>用户</th>-->
    <!--                            <th>值</th>-->
    <!--                        </tr>-->
    <!--                        </thead>-->
    <!--                        <tbody>-->
    <!--                        <tr>-->
    <!--                            <td><small>进行中...</small>-->
    <!--                            </td>-->
    <!--                            <td><i class="fa fa-clock-o"></i> 11:20</td>-->
    <!--                            <td>青衣5858</td>-->
    <!--                            <td class="text-navy"><i class="fa fa-level-up"></i> 24%</td>-->
    <!--                        </tr>-->
    <!--                        <tr>-->
    <!--                            <td><span class="label label-warning">已取消</span>-->
    <!--                            </td>-->
    <!--                            <td><i class="fa fa-clock-o"></i> 10:40</td>-->
    <!--                            <td>徐子崴</td>-->
    <!--                            <td class="text-navy"><i class="fa fa-level-up"></i> 66%</td>-->
    <!--                        </tr>-->
    <!--                        <tr>-->
    <!--                            <td><small>进行中...</small>-->
    <!--                            </td>-->
    <!--                            <td><i class="fa fa-clock-o"></i> 01:30</td>-->
    <!--                            <td>姜岚昕</td>-->
    <!--                            <td class="text-navy"><i class="fa fa-level-up"></i> 54%</td>-->
    <!--                        </tr>-->
    <!--                        <tr>-->
    <!--                            <td><small>进行中...</small>-->
    <!--                            </td>-->
    <!--                            <td><i class="fa fa-clock-o"></i> 02:20</td>-->
    <!--                            <td>武汉大兵哥</td>-->
    <!--                            <td class="text-navy"><i class="fa fa-level-up"></i> 12%</td>-->
    <!--                        </tr>-->
    <!--                        <tr>-->
    <!--                            <td><small>进行中...</small>-->
    <!--                            </td>-->
    <!--                            <td><i class="fa fa-clock-o"></i> 09:40</td>-->
    <!--                            <td>荆莹儿</td>-->
    <!--                            <td class="text-navy"><i class="fa fa-level-up"></i> 22%</td>-->
    <!--                        </tr>-->
    <!--                        <tr>-->
    <!--                            <td><span class="label label-primary">已完成</span>-->
    <!--                            </td>-->
    <!--                            <td><i class="fa fa-clock-o"></i> 04:10</td>-->
    <!--                            <td>栾某某</td>-->
    <!--                            <td class="text-navy"><i class="fa fa-level-up"></i> 66%</td>-->
    <!--                        </tr>-->
    <!--                        <tr>-->
    <!--                            <td><small>进行中...</small>-->
    <!--                            </td>-->
    <!--                            <td><i class="fa fa-clock-o"></i> 12:08</td>-->
    <!--                            <td>范范范二妮</td>-->
    <!--                            <td class="text-navy"><i class="fa fa-level-up"></i> 23%</td>-->
    <!--                        </tr>-->
    <!--                        </tbody>-->
    <!--                    </table>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<script th:src="@{/js/getData.js}"></script>
<script th:src="@{/js/date_week.js}"></script>
<th:block th:include="include :: sparkline-js"/>
<script type="text/javascript">
    $(document).ready(function () {
        var data2 = [
            [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
            [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
            [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
            [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
            [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
            [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
            [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
            [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
        ];

        var data3 = [
            [gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
            [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
            [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
            [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
            [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
            [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
            [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
            [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
        ];


        var dataset = [
            {
                label: "订单数",
                data: data3,
                color: "#1ab394",
                bars: {
                    show: true,
                    align: "center",
                    barWidth: 24 * 60 * 60 * 600,
                    lineWidth: 0
                }

            }, {
                label: "付款数",
                data: data2,
                yaxis: 2,
                color: "#464f88",
                lines: {
                    lineWidth: 1,
                    show: true,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.2
                        }, {
                            opacity: 0.2
                        }]
                    }
                },
                splines: {
                    show: false,
                    tension: 0.6,
                    lineWidth: 1,
                    fill: 0.1
                },
            }
        ];


        var options = {
            xaxis: {
                mode: "time",
                tickSize: [3, "day"],
                tickLength: 0,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 10,
                color: "#838383"
            },
            yaxes: [{
                position: "left",
                max: 1070,
                color: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: ' Arial',
                axisLabelPadding: 67
            }
            ],
            legend: {
                noColumns: 1,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
            grid: {
                hoverable: false,
                borderWidth: 0,
                color: '#838383'
            }
        };

        function gd(year, month, day) {
            return new Date(year, month - 1, day).getTime();
        }

        var previousPoint = null,
            previousLabel = null;

        $.plot($("#flot-dashboard-chart"), dataset, options);
    });


</script>
</body>
</html>
